<template>
  <div>
    <a-tabs size="small" defaultActiveKey="flow-attr" :activeKey="activeKey">
      <a-tab-pane key="flow-attr">
        <span slot="tab">
          <a-icon type="cluster" />
          流程属性
        </span>

        <a-form layout="horizontal">
          <a-form-item
            label="流程id"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="flowData.attr.id" disabled />
          </a-form-item>
          <a-form-item
            label="流程名称"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="flowData.attr.name" />
          </a-form-item>
          <a-form-item
            label="流程简称"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="flowData.attr.shortName" />
          </a-form-item>
          <a-form-item
            label="图标"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="flowData.attr.icoName" />
          </a-form-item>
          <a-form-item
            label="图标颜色"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="flowData.attr.icoColor" />
          </a-form-item>
          <a-form-item
            label="背景颜色"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="flowData.attr.icoBackgroundColor" />
          </a-form-item>
          <a-form-item
            label="流程类型"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-select v-model="flowData.attr.type" class="item_width">
              <el-option
                v-for="item in categoryList"
                :key="item.id + ''"
                :label="item.name"
                :value="item.id + ''"
              >
                <span style="float: left" v-if="item.deep === 1">{{
                  item.name
                }}</span>
                <span :style="deepStyle(item)" v-else>┝{{ item.name }}</span>
              </el-option>
            </el-select>
          </a-form-item>
          <a-form-item
            label="审批人去重"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-select
              v-model="flowData.attr.removeDuplicationType"
              class="item_width"
            >
              <el-option
                v-for="item in removeDuplicationTypes"
                :key="item.keyword"
                :label="item.label"
                :value="item.keyword"
              ></el-option>
            </el-select>
            <el-checkbox v-model="flowData.attr.launchUserAutoPass"
              >发起人审批时自动通过</el-checkbox
            >
          </a-form-item>
          <a-form-item
            label="流程用户"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <user-select v-model="flowData.attr.managerId"></user-select>
          </a-form-item>
          <a-form-item
            label="实例用户"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <user-select
              :is-mul-select="true"
              v-model="flowData.attr.instanceManagerId"
            ></user-select>
          </a-form-item>
          <a-form-item
            label="完成时删除"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-switch
              checkedChildren="是"
              unCheckedChildren="否"
              default-checked
              v-model="flowData.attr.removeCompleted"
            />
          </a-form-item>
          <a-form-item
            label="开启调试"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              default-checked
              v-model="flowData.attr.debug"
            />
          </a-form-item>
          <a-form-item
            label="调试用户"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <user-select
              :select-type="0"
              v-model="flowData.attr.debugUsers"
            ></user-select>
          </a-form-item>
          <a-form-item
            label="备注"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="flowData.attr.note" />
          </a-form-item>
          <a-form-item
            label="关联数据库表"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-select
              v-model="flowData.attr.titleFieldTable"
              placeholder="请选择"
              clearable
              @change="tableChange"
              class="item_width"
            >
              <el-option
                v-for="item in tables"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName"
              ></el-option>
            </el-select>
          </a-form-item>
          <a-form-item
            label="标题字段名"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-select
              v-model="flowData.attr.titleField"
              placeholder="请选择"
              clearable
              class="item_width"
            >
              <el-option
                v-for="item in titleFields"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              ></el-option>
            </el-select>
          </a-form-item>
          <a-form-item
            label="完成标识"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-select
              v-model="flowData.attr.completeField"
              placeholder="请选择"
              clearable
              class="item_width"
            >
              <el-option
                v-for="item in titleFields"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              ></el-option>
            </el-select>
          </a-form-item>
          <a-form-item
            label="主键字段"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-select
              v-model="flowData.attr.pkField"
              placeholder="请选择"
              clearable
              class="item_width"
            >
              <el-option
                v-for="item in titleFields"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName"
              ></el-option>
            </el-select>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="link-attr">
        <span slot="tab">
          <a-icon type="branches" />
          连线属性
        </span>
        <a-form layout="horizontal">
          <a-form-item
            label="id"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="currentSelect.id" disabled />
          </a-form-item>
          <a-form-item
            label="源节点"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="currentSelect.sourceId" disabled />
          </a-form-item>
          <a-form-item
            label="目标节点"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="currentSelect.targetId" disabled />
          </a-form-item>
          <a-form-item
            label="文本"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <el-input v-model="currentSelect.label" />
          </a-form-item>
          <a-form-item
            label="sql"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-textarea
              placeholder="请输入sql"
              v-model="currentSelect.sqlStatement"
              :auto-size="{ minRows: 2, maxRows: 6 }"
            />
          </a-form-item>
          <a-form-item
            label="自定义方法"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-textarea
              placeholder="请输入自定义方法"
              v-model="currentSelect.customMethod"
              :auto-size="{ minRows: 2, maxRows: 6 }"
            />
          </a-form-item>
          <a-form-item
            label="表达式"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-textarea
              placeholder="请输入表达式"
              v-model="currentSelect.expression"
              :auto-size="{ minRows: 2, maxRows: 6 }"
            />
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import jsplumb from "jsplumb";
import { flowConfig } from "../config/args-config.js";

export default {
  name: "FlowAttr",
  props: ["plumb", "flowData", "select"],

  components: {
    jsplumb
  },
  data() {
    return {
      tabConfig: { annShow: true },
      flowType: [],
      categoryProps: {
        checkStrictly: true,
        label: "name",
        value: "id"
      },
      categoryList: [],
      flowTypes: this.getDictionary("WORKFLOW_FLOW_TYPE"),
      removeDuplicationTypes: this.getDictionary("REMOVE_DUPLICATION_TYPE"),
      currentSelect: this.select,
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 15 }
      },
      activeKey: "flow-attr",
      tables: [], // 数据库表名称
      titleFields: [] //数据库字段
    };
  },
  mounted() {
    this.getCategoryTree();
    this.getWorkFlowTable();
  },
  methods: {
    // 获取流程数据库字段
    tableChange(val) {
      this.API.getWorkflowTableFieldList({ tableName: val }).then(res => {
        this.titleFields = res.data;
      });
    },
    // 获取流程数据库表
    getWorkFlowTable() {
      this.API.getWorkflowTableList().then(res => {
        this.tables = res.data;
      });
    },

    deepStyle(item) {
      return "margin-left:" + item.deep * 3 + "px";
    },
    // 获取流程类型
    getCategoryTree() {
      this.API.getCategoryTree({ type: "WORKFLOW", parentId: 0 }).then(res => {
        if (res.data) {
          console.log(res.data, 11);
          this.categoryList = [];
          let tem = this.setCategoryDeep(res.data, 1);
          console.log(tem);
        }
      });
    },
    // 设置分类的深度
    setCategoryDeep(data, deep) {
      console.log(data, deep);
      data.map(item => {
        item.deep = deep;
        let nextDeep = deep + 1;
        this.categoryList.push(item);
        if (item.children) {
          item.children = this.setCategoryDeep(item.children, nextDeep);
        }
      });
      return data;
    }
  },
  watch: {
    select(val) {
      this.currentSelect = val;
      if (this.currentSelect.type == "link") {
        this.activeKey = "link-attr";
      } else {
        this.activeKey = "flow-attr";
      }
    },
    currentSelect: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true
    },
    "flowData.attr.titleFieldTable"(val) {
      this.tableChange(val);
    }
  }
};
</script>

<style lang="scss">
@import "../style/flow-attr.scss";
</style>
